import React, { Component, lazy } from "react";
import { withRouter } from "../../router/hooks";
import store from "../../store/index";
import { request } from "../../utils/api";
import "./home.less";
import { withTranslation } from "react-i18next";
const Header = lazy(() =>
  import(/* webpackChunkName:'header' */ "../components/header/index")
);
const Tabbar = lazy(() =>
  import(/* webpackChunkName:'tabbar' */ "../components/tabbar/index")
);
const List = lazy(() =>
  import(/* webpackChunkName: 'list' */ "../../components/list/index")
);
const MessageItem = lazy(() =>
  import(
    /* webpackChunkName:'messageItem' */ "../../components/messageItem/index"
  )
);

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listData: [],
    };
  }
  get newData() {
    const data = this.state.listData;
    return data;
  }
  render() {
    const { t } = this.props;
    return (
      <div className="home">
        <Header routeName={t("Home")} />
        <div className="content">
          <List slot={<MessageItem />} data={this.newData}></List>
        </div>
        <Tabbar routeName="Home" />
      </div>
    );
  }
  componentDidMount() {
    store.dispatch({ type: "UPDATETOKEN" });
    request.dispatch("HOME_GETLIST").then((v) => {
      console.log(v);
      this.setState({ ...this.state, listData: v.data });
    });
  }
  componentDidUpdate() {}
  componentWillUnmount() {}
}

export default withRouter(withTranslation()(Home));
